<template>
  <div class="app-container" >
    <el-form :model="queryParams" ref="queryForm" :inline="true">
      <el-form-item label="昵称：">
        <el-input  v-model="queryParams.search" placeholder="请输入昵称"></el-input>
      </el-form-item>
      <el-form-item label="手机号码：">
        <el-input  v-model="queryParams.search" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item label="分享客状态：">
        <el-select
          v-model="queryParams.status"
          placeholder="请选择分享客状态"
          clearable
          size="small"
          style="width: 240px"
        >
          <el-option
            v-for="item in statusOptions"
            :key="item.index"
            :label="item.name"
            :value="item.index"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="成为分享客：">
        <el-date-picker
          v-model="dateTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button @click="getShareCustomerList" type="primary">查询</el-button>
        <!-- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> -->
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      stripe
      border
      :header-cell-style="tableHeaderStyle"
      style="width: 100%">
      <el-table-column
        label="序号"
        type="index"
        width="50">
      </el-table-column>
      <el-table-column
        width="120"
        label="头像">
        <template slot-scope="scope">
          <div class="goodsBox">
            <img :src="'https://yswl-cloud-service.obs.cn-north-4.myhuaweicloud.com/'+scope.row.headUrl" alt="">
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="昵称">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="手机号">
      </el-table-column>
      <el-table-column
        prop="levelName"
        label="等级">
      </el-table-column>
      <el-table-column
        prop="inviterId"
         width="180"
        label="邀请人ID">
      </el-table-column>
      <el-table-column
        prop="inviteNum"
        label="邀请人数">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="成为分享客时间">
      </el-table-column>
      <el-table-column
        prop="status"
        label="分享客状态">
        <template slot-scope="scope">
          <div class="goodsBox">
            <span v-if="scope.row.status==1">正常</span>
            <span v-else>冻结</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="220">
        <template slot-scope="scope">
          <el-button
            type="primary"
            @click="goDetail(scope.row)"
            size="mini">
            查看
          </el-button>
          <el-button
            v-if="scope.row.status == 1"
            type="danger"
            @click="frozen(scope.row,2)"
            size="mini">
            冻结
          </el-button>
          <el-button
            v-if="scope.row.status == 2"
            type="text"
            @click="frozen(scope.row,1)"
            size="small">
            解冻
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 冻结弹窗 -->
    <el-dialog center :show-close="false" :visible.sync="dialogVisible" width="30%">
      <div>
        <img :src="baseImgUrl+'/'+imgUrl"/>
        <p class="ys">{{names}}</p>
        <p class="ys">{{phones}}</p>
        <p>冻结账号说明：</p>
        <p>该账号被冻结，包括账户内的积分、账户余额等，<br> 该账户不能发生任何交易行为（等于没有登录的状态）。</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="diale()">确 定</el-button>
      </span>
    </el-dialog>
    <div class="paginationBox">
      <el-pagination
        :page-sizes="[10, 50, 100, 200]"
        :page-size.sync="queryParams.pageSize"
        :current-page.sync="queryParams.pageNum"
        @size-change="getShareCustomerList"
        @current-change="getShareCustomerList"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    
  </div>
</template>

<script>
  import { getShareCustomerList,updateUserStatus } from '@/api/setSharing'
  import Setting from '@/settings';
  export default {
    name: "sharingList",
    data() {
      return {
        imgUrl:'',//冻结头像地址
        names:'',//冻结昵称
        phones:'',//冻结手机号
        status_s:'',
        Iid:'',
        statusOptions: [
          {index:0,name:"待审核"},
          {index:1,name:"通过"},
          {index:2,name:"拒绝"},
        ],
        dateTime:[],
        queryParams: {
          startTime:"",
          endTime:"",
          pageNum: 1,
          pageSize: 10
        },
        tableData: [],
        total:0,
        baseImgUrl: process.env.VUE_APP_FILE_URL,
        tableHeaderStyle: Setting.tableHeaderStyle,
        dialogVisible: false
      }
    },
    filters:{
        changeStatus(val){ 
          switch(val) {
            case 1:
              return  "通过"
              break;
            case 2:
              return  "拒绝"
              break;
            default:
               return  "待审核"
          }
        }
    },
    watch: {
      dateTime(val){
          if(val.length>0){
            this.queryParams.startTime=val[0]
            this.queryParams.endTime=val[1]
          }
      }
    },
    mounted() {
      this.getShareCustomerList()
    },
    methods: {
      frozen(val,num) {//冻结弹窗开关
      this.imgUrl = val.headUrl
      this.names = val.name
      this.phones = val.phone
      this.status_s = val.status
      this.Iid = val.userId
      console.log(val)
      // console.log(num)
      this.dialogVisible = true
      },
      async diale(){
        await updateUserStatus({ id: this.Iid,status:this.status_s }).then(res => {
            if (res.code == 200) {
              this.getShareCustomerList()
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
              this.dialogVisible = false
            } else {
              this.$message(res.msg)
            }
          })
      },
      goAdd(){
        this.$router.push("/addSharing")
      },
      resetQuery(){
        this.queryParams={
          pageNum: 1,
          pageSize: 10
        }
        this.dateTime=[]
        this.getShareCustomerList()
      },
      getShareCustomerList(){ //查询
        getShareCustomerList(this.queryParams).then(res=>{
          if(res.code == 200){

            this.tableData = res.data.list
            this.total = res.data.total
          }

        })
      },
      goDetail(row){
        this.$router.push({path:"/separateAccounts",query:{id:row.userId}})
      },
    }
  }
</script>

<style scoped lang="scss">
  .goodsBox{
    img{
      width: 80px;
      height: 80px;
    }
  }
  ::v-deep .el-input--medium .el-input__inner{
    width: 90%;
  }
  ::v-deep .el-form-item__label{
    padding: 0;
  }
  ::v-deep .el-button--medium{
    margin-left: 20px;
  }
  ::v-deep .el-input--small .el-input__inner {
    height: 36px;
    line-height: 36px;
}
::v-deep .el-select > .el-input{
  width: 90%;
}
::v-deep .el-table .cell{
  text-align: center;
}
::v-deep .el-table--border td{
    border-right: none!important;
}
::v-deep .el-table--border th{
    border-right: none!important;
}
::v-deep .el-table--border{
  border: none;
}
.el-table--striped .el-table__body tr.el-table__row--striped td{
  background:none;
}
::v-deep .el-dialog__header {
    padding: 0px; 
    padding-bottom: 0px; 
}
::v-deep .el-dialog__body{
  text-align: center;
  img{
    width: 15%;
    border-radius: 50%;
  }
}
.ys{
  font-size: 16px;
  color: #333;
  font-weight: 600;
}
</style>
